import './TemplateOnlyA01.scss'
import { Result } from 'antd'
import { useEffect, useRef, useState } from 'react'
import { ColorCallBack, SpacingCallBack, SpacingWidthCallBack, assembleDataA01, getNestedValue } from '../Utils'
import { LayoutDeftula } from '../Config/LayoutDeftula'

import { v4 } from 'uuid'
import { useSize } from 'ahooks'
import { VideoTempA03 } from '../Utils/VideoTemp'


const VideoBox = ({ data }) => {
    const videoBoxRef = useRef()
    const size = useSize(videoBoxRef)
    const [Url, setUrl] = useState()
    const [Status, setStatus] = useState(true)
    const { deviceSerial, channelNo, token, cameraFactory, playUrl, hd } = data
    if (cameraFactory === 1 || cameraFactory === 2) {
        const http = window.location.hostname === 'jtgj.hljsjtgj.com' ? 'https://image.hljsjtgj.com' : 'https://yingshi.ljkjkf.com'
        useEffect(() => {
            if (size && Status) {
                const { width, height } = size
                const url = cameraFactory === 1 ?
                    `${http}/webvideo.html?url=ezopen://open.ys7.com/${deviceSerial}/${channelNo}${hd ? '.hd' : ''}.live&token=${token}` :
                    `${http}/webLive.html?url=imou://open.lechange.com/${deviceSerial}/${channelNo}/1?streamId=1|kitToken=${token}`
                setUrl(`${url}&width=${width}&height=${height}`)
                setStatus(false)
            }
        }, [size])
        return (
            <div className='VideoBox' ref={videoBoxRef}>
                {Url &&
                    <iframe
                        title="Video"
                        src={Url}
                        width="100%"
                        height="100%"
                        scrolling="no"
                        frameBorder="0"
                        allowFullScreen={true}
                    />
                }
            </div>
        )
    }
    if (cameraFactory === 4 || cameraFactory === 5) {

        return (
            // <div>video {playUrl}</div>
            <VideoTempA03 url={playUrl} />
        )
    }


}



const TemplateOnlyA01 = ({ config, apiData }) => {
    const [Data, setData] = useState()
    const [Render, setRender] = useState({})
    const configuration = config || LayoutDeftula.OnlyA01
    const { data_apiName, data_dataLevel, renderNumber } = configuration


    useEffect(() => {
        if (apiData?.length !== 0 && data_apiName && data_dataLevel) {
            const [urlList] = apiData.filter(v => v.name === data_apiName)
            const data = getNestedValue(data_dataLevel, urlList)
            const render = Object.fromEntries(renderNumber.map((item, index) => [index + 1, { width: `${item.width}%`, height: `${item.height}%` }]))
            setRender(render)
            setData(data)
        }
    }, [config, apiData])

    return (
        <div className='TemplateOnlyA01'>
            {Data ?
                Data.length === 0 ?
                    <div className='preview'>
                        <Result status="404" title="未获取到视频信息!" />
                    </div> :
                    <div className='viewList'>
                        {Data.map(item => {
                            return (
                                <div key={item.uuid} style={Render[Data.length]}>
                                    <VideoBox key={v4()} data={item} />
                                </div>
                            )
                        })}
                    </div> :
                <div className='preview'>
                    <Result status="403" title="监控画面,配置后显示!" />
                </div>
            }
        </div>
    );
};

export default TemplateOnlyA01;